site_8g/src/app/[locale]/(navbar)/vip/top.tsx

"use client";
import { CashbackTypes } from "@/api/cashback";
import { UserVipInfo } from "@/api/user";
import TipsModal from "@/components/TipsModal";
import VipIcon from "@/components/VipIcon";
import { percentage } from "@/utils/methods";
import { ProgressBar } from "antd-mobile";
import clsx from "clsx";
import React from "react";
import CashbackTable from "./CashbackTable";
import styles from "./page.module.scss";

interface Props {
    data: UserVipInfo;
    cashbackInfo: CashbackTypes;
}

const Top: React.FC<Props> = ({ data, cashbackInfo }) => {
    const descRef = React.useRef<any>(null);

    return (
        <>
            <div className={styles.top}>
                <div className={styles.topheader}>
                    <div className="fobnt-bold mb-[.06rem] text-[.18rem]">VIP1</div>
                    <div className="text-[.11rem]">
                        <span>{data?.vip_exp}XP</span>
                        <span className="text-[#788f97]">/{data?.vip_score_exp}XP</span>
                    </div>
                    <div className="relative my-[.1rem] mr-[.4rem]">
                        <ProgressBar
                            percent={percentage(data?.vip_exp, data?.vip_score_exp)}
                            style={{
                                "--fill-color": "#11de68",
                                "--track-color": "#0f1219",
                                "--track-width": "0.07rem",
                            }}
                        ></ProgressBar>
                        <div
                            className="absolute top-[50%] h-[.13rem] w-[.13rem] -translate-x-[50%] -translate-y-[50%] rounded-[50%] bg-[#fff]"
                            style={{
                                left: `${percentage(data?.vip_exp, data?.vip_score_exp)}%`,
                            }}
                        ></div>
                    </div>
                    <div className="text-[0.12rem]">
                        Aposte mais{" "}
                        <span className="text-[#11dd68]">
                            {(data?.vip_score_exp || 0) - (data?.vip_exp || 0)}
                        </span>{" "}
                        para atualizar para
                        <span className="text-[#11dd68]">&nbsp;VlP {data?.vip_next_level}</span>
                    </div>
                    <VipIcon
                        level={data?.vip_level}
                        className="absolute right-[0] top-[0] w-[1rem!important]"
                    ></VipIcon>
                </div>
                <div className={clsx(styles.intro, "mt-[.3rem] text-[.12rem]")}>
                    <div>
                        Faça mais apostas para atualizar seu nivel VIP e aproveitar mais Bônus!
                    </div>
                    <div>
                        Os tipos de crash e jogos virtuais não ganham experiência de upgrade VIP.
                    </div>
                    <div>Aposta de R$1,00=1XP</div>
                    <div className="mt-[.2rem] text-center">
                        <span
                            className="text-[.15rem] text-[#11dd68]"
                            onClick={() => descRef.current?.onOpen()}
                        >
                            Ver detalhes de nível &gt;
                        </span>
                    </div>
                </div>
            </div>
            <TipsModal
                title={
                    <div
                        className={
                            "flex items-center justify-center p-[.1rem] text-[.16rem] text-[#ffffff]"
                        }
                    >
                        O nível VIP
                    </div>
                }
                className={clsx(styles.descBox)}
                getContainer={document.querySelector("#app")}
                ref={descRef}
            >
                {cashbackInfo && <CashbackTable cashbackInfo={cashbackInfo}></CashbackTable>}
            </TipsModal>
        </>
    );
};

export default Top;